<template>
	<view class="root-box">
		<uv-navbar autoBack placeholder bgColor="transparent" :fixed="false" title="收益"></uv-navbar>
		<view class="content">
			<view class="plan-i-box" @click="onGoWithdraw">
				<view class="plan-i-item">
					<view class="pi-title">累计收益(元)</view>
					<view class="pi-num">1366.76</view>
				</view>
				<view class="plan-i-item">
					<view class="pi-title">可提现(元)</view>
					<view class="pi-num">1366.76</view>
				</view>
				<view class="tixian-box">去提现</view>
			</view>
			<view class="loop-i-boox mt-20" id="tabsWrap">
                <ZyhTabs v-model:activeIndex="active" :tabs="tabs" activeColor="#333" inactiveColor="#999"
					sliderColor="#ff0000" :sliderWidth="60" :fontSize="24" :paddingTopValue="15"
					:paddingBottomValue="15" />
				<view class="month-box">2025-07-01 ~ 2025-07-31</view>
				<view class="tongji-box">
					<view class="tongji-item-box">
						<view class="fz20 clight">收入(元)</view>
						<view class="fz30 cred">127.99</view>
					</view>
					<view class="tongji-item-box">
						<view class="fz20 clight">提现(元)</view>
						<view class="fz30">127.99</view>
					</view>
					<view class="tongji-item-box">
						<view class="fz20 clight">支出(元)</view>
						<view class="fz30">127.99</view>
					</view>
				</view>
            </view>
			<view class="loop">
				<view class="loop-i-item-box">
					<view class="loop-i-item">
						<view class="server-name">邻集市订单</view>
						<view class="loop-i-item-num-box">收益￥56</view>
					</view>
					<view class="loop-i-item mt-20">
						<view class="fz20 clight">2025649349529238</view>
						<view class="fz20 clight">2025-08-12 22:10:10</view>
					</view>
				</view>
				
				<view class="loop-i-item-box">
					<view class="loop-i-item">
						<view class="server-name">福卡订单</view>
						<view class="loop-i-item-num-box">收益￥56</view>
					</view>
					<view class="loop-i-item mt-20">
						<view class="fz20 clight">2025649349529238</view>
						<view class="fz20 clight">2025-08-12 22:10:10</view>
					</view>
				</view>
				
			</view>
        </view>
		<managerNavbar :tabValue="tabValue"></managerNavbar>
	</view>

</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import managerNavbar from '../components/manager_navbar.vue'
	import ZyhTabs from "@/components/ZyhTabs.vue"
	import {
		navigate
	} from '@/util/tools.js';
	const tabValue = ref(2)
	const currentTab = ref(0)
	const tabs = ref(["已结算", "待结算","待收款"])

	const active = ref(0)

	const onTabChange = (index) => {
		console.log("切换到：", index)
	}

	const change = async (eg = null) => {

		if (eg) {
			currentTab.value = eg.index;
		}

	}
	
	const onGoWithdraw=()=>{
		navigate('/pages-skilled/withdraw/withdraw')
	}
</script>

<style lang="scss" scoped>
	.root-box {
		background-image: url('https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0812/09673202508121156597608.png');
		background-color: #efefef;
		background-position: top;
		/* 置顶 */
		background-repeat: no-repeat;
		/* 不重复 */
		background-size: 100% auto;
		/* 宽度撑满，高度自动保持比例 */
		min-height: 100vh;
		padding-top: calc(var(--status-bar-height) + 30rpx);
		width: 100vw;

		.content {
			padding: 30rpx;
			box-sizing: border-box;

		}
	}

	.plan-i-box {
		display: flex;
		background-color: red;
		justify-content: space-between;
		align-items: center;
		border-radius: 20upx;
		padding: 20upx 160upx;
		box-sizing: border-box;
		color: #fff;
		position: relative;
	}

	.plan-i-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.pi-title {
		font-size: 20upx;
	}

	.pi-num {
		font-size: 36upx;
	}

	.tixian-box {
		position: absolute;
		background-color: #fff;
		right: 0;
		top: 30upx;
		border-radius: 20upx 0 0 20upx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 5upx 20upx;
		font-size: 20upx;
		color: red;
	}

	.loop-i-boox {
		background-color: #fff;
		width: 100%;
		position: relative;
		box-sizing: border-box;

		::v-deep(.tui-tabs) {
			width: 100% !important;
		}
	}
	
	.month-box{
		padding: 20upx 30upx;
		display: flex;
		align-items: center;
		font-size: 24upx;
		color: #333;
		border-top: 1px solid #efefef;
		
	}
	
	.tongji-box{
		border-top: 1px solid #efefef;
		padding: 20upx 40upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.tongji-item-box{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}
	
	.loop-i-item-box{
		border-top: 1px solid #efefef;
		padding: 20upx 30upx;
	}
	
	.loop-i-item{
		display: flex;
		justify-content: space-between;
	}
	.loop-i-item-num-box{
		background-color: red;
		color: #fff;
		padding: 5upx 10upx;
		font-size: 20upx;
	}
	
	.loop{
		background-color: #fff;
	}
	
	.server-name{
		font-size: 30upx;
		font-weight: 500;
	}
</style>